<template>
    <div>
        <vue-office-excel :src="docx" style="height: 100vh;" @rendered="rendered" v-if="type == '.xls' || type == '.xlsx'" />
        <vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" v-else />
    </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
import { redownload } from '@/api/index';
import fileType from "./vo/filetype";
export default {
    components: {
        VueOfficeDocx,
        VueOfficeExcel
    },
    data: function () {
        return {
            docx: '',
            type: ''
        };
    },
    methods: {
        // 文件预览
        redownload(id, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            redownload(data).then(res => {
                console.log(res)
                this.docx = res

            })
        },
        rendered() {
            console.log("渲染完成")
        }
    },
    mounted() {
        this.type = this.$route.query.type
        this.redownload(this.$route.query.id, this.$route.query.type)
        console.log(this.$route.query)
    }
};
</script>

<style scoped>
@page {
    size: auto;
    margin: 0mm;
}
</style>
<style>
table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #abacae;
    border-collapse: collapse;
    /*合并相邻表格的间距*/

}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}
</style>